<template>
  <div id="nav">
    <!-- <template>

      <a-directory-tree multiple
                        default-expand-all
                        :load-data="onLoadData"
                        :tree-data="treeData"
                        @select="onSelect"
                        @expand="onExpand">
        <a-tree-node key="0-0"
                     title="parent 0">
          <a-tree-node key="0-0-0"
                       title="leaf 0-0"
                       is-leaf />
          <a-tree-node key="0-0-1"
                       title="leaf 0-1"
                       is-leaf />
        </a-tree-node>
        <a-tree-node key="0-1"
                     title="parent 1">
          <a-tree-node key="0-1-0"
                       title="leaf 1-0"
                       is-leaf />
          <a-tree-node key="0-1-1"
                       title="leaf 1-1"
                       is-leaf />
        </a-tree-node>
      </a-directory-tree>
    </template> -->
    <el-scrollbar>
      <el-menu :default-active="defaultIndex" :active="indexSelected" class="el-menu-vertical-demo" @select="onSelect">
        <el-menu-item index="0">路线概述</el-menu-item>
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">路线结点</span>
          </template>
          <el-menu-item v-for="(node, index) in nodes" :key="index" :index="'1-' + index">{{ node.title }}
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      indexSelected: '0',
      isFinished: false,
      reachEnd: false,
    }
  },
  props: {
    latestIndex: Number,
    nodes: Array,
  },
  computed: {
    defaultIndex() {
      return this.latestIndex == 0
        ? this.latestIndex.toString()
        : '1-' + (this.latestIndex == this.nodes.length ? this.latestIndex - 1 : this.latestIndex)
    },
  },
  watch: {
    indexSelected: function () {
      let indexArr = this.indexSelected.split('-')
      let isOverview = indexArr[0] == 0
      this.$bus.$emit(
        'loadNode',
        indexArr.length == 1 ? -1 : parseInt(indexArr[1]),
        isOverview,
        this.isFinished,
        this.reachEnd
      )
    },
    defaultIndex: function () {
      this.indexSelected = this.defaultIndex
    },
  },
  // data() {
  //   return {
  //     model: 'aaaaaa',
  //     treeData: [
  //       { title: 'Expand to load', key: '0' },
  //       { title: 'Expand to load', key: '1' },
  //       { title: 'Tree Node', key: '2', isLeaf: true },
  //     ],
  //   }
  // },
  // methods: {
  //   onSelect(data) {
  //     this.model = data
  //     this.$bus.$emit('selectNode', data[0])
  //   },
  //   onLoadData(treeNode) {
  //     return new Promise((resolve) => {
  //       if (treeNode.dataRef.children) {
  //         resolve()
  //         return
  //       }
  //       setTimeout(() => {
  //         // console.log(`${treeNode.eventKey}`)
  //         treeNode.dataRef.children = [
  //           { title: 'Child Node', key: `${treeNode.eventKey}-0` },
  //           { title: 'Child Node', key: `${treeNode.eventKey}-1` },
  //         ]
  //         this.treeData = [...this.treeData]
  //         resolve()
  //       }, 1000)
  //     })
  //   },

  //   onExpand() {},
  // },
  methods: {
    onSelect(index) {
      this.isFinished = false
      this.reachEnd = false
      this.indexSelected = index
      console.log(index)
    },
    emitSwitchPage() { },
  },
  mounted() {
    this.$bus.$on('finishNode', () => {
      let indexArr = this.indexSelected.split('-')
      let first = parseInt(indexArr[0])
      this.isFinished = true
      if (first == 0) {
        first++
        this.reachEnd = false
        this.indexSelected = first + '-0'
      } else {
        let second = parseInt(indexArr[1])
        if (second == this.nodes.length - 1) {
          this.reachEnd = true
          console.log(second)
          second++
          console.log(second)
          this.indexSelected = first + '-' + second
        } else {
          this.reachEnd = false
          console.log(second)
          second++
          console.log(second)
          this.indexSelected = first + '-' + second
        }
      }
    })
  },
  beforeDestroy() {
    this.$bus.$off('finishNode')
  },
}
</script>

<style scoped>
#nav {
  width: 250px;
  margin-top: 50px;
  margin-left: 50px;
  /* border: 1px solid; */
  box-shadow: 0 0 10px #409eff;
  border-radius: 10px;
  height: 70%;
  max-height: 70%;
  overflow: auto;
  background-color: rgba(255, 255, 255, 0.5);
}

:deep .el-menu {
  border-radius: 10px;
}

:deep .el-menu-item {
  border-radius: 10px;
}

.el-scrollbar {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

:deep .el-scrollbar__wrap {
  height: 100%;
  overflow: scroll;
  overflow-x: auto;
}
</style>